<template>
  <div class="transactions">
    <h1>交易历史</h1>

    <el-table
      v-loading="loading"
      :data="transactions"
      style="width: 100%"
      border
    >
      <el-table-column prop="id" label="ID" width="80"> </el-table-column>
      <el-table-column prop="transaction_type" label="交易类型" width="120">
        <template slot-scope="scope">
          <el-tag :type="getTypeTag(scope.row.transaction_type)">
            {{ formatTransactionType(scope.row.transaction_type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="token_address" label="代币地址" width="220">
        <template slot-scope="scope">
          <el-tooltip
            :content="scope.row.token_address"
            placement="top"
            effect="light"
          >
            <span>{{ shortenAddress(scope.row.token_address) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="token_id" label="Token ID" width="100">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusTag(scope.row.status)">
            {{ formatStatus(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="transaction_hash" label="交易哈希" width="220">
        <template slot-scope="scope">
          <template v-if="scope.row.transaction_hash">
            <el-tooltip
              :content="scope.row.transaction_hash"
              placement="top"
              effect="light"
            >
              <span>{{ shortenAddress(scope.row.transaction_hash) }}</span>
            </el-tooltip>
            <el-link
              type="primary"
              :href="`https://etherscan.io/tx/${scope.row.transaction_hash}`"
              target="_blank"
              style="margin-left: 5px"
            >
              <i class="el-icon-view"></i>
            </el-link>
          </template>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.created_at) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Transactions",
  data() {
    return {
      loading: false,
      transactions: [],
    };
  },
  created() {
    this.fetchTransactions();
  },
  methods: {
    async fetchTransactions() {
      this.loading = true;
      try {
        const response = await axios.get("/transaction/history");
        this.transactions = response.data;
      } catch (error) {
        this.$message.error("获取交易历史失败");
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    formatTransactionType(type) {
      const types = {
        mint_nft: "NFT铸造",
        transfer: "转账",
        swap: "兑换",
      };
      return types[type] || type;
    },
    formatStatus(status) {
      const statuses = {
        pending: "处理中",
        completed: "已完成",
        failed: "失败",
      };
      return statuses[status] || status;
    },
    getTypeTag(type) {
      const tags = {
        mint_nft: "success",
        transfer: "primary",
        swap: "warning",
      };
      return tags[type] || "info";
    },
    getStatusTag(status) {
      const tags = {
        pending: "warning",
        completed: "success",
        failed: "danger",
      };
      return tags[status] || "info";
    },
    shortenAddress(address) {
      if (!address) return "-";
      return `${address.substring(0, 6)}...${address.substring(
        address.length - 4
      )}`;
    },
    formatDate(dateString) {
      if (!dateString) return "-";
      const date = new Date(dateString);
      return date.toLocaleString();
    },
  },
};
</script>

<style scoped>
.transactions {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>
